Amplify FrameworkのUIコンポーネントをカスタマイズして、テーマカラーの変更と日本語化をしてみた
こんにちは！DA(データアナリティクス)事業本部 インテグレーション部の大高です。
先日、試してみた新しくなったAmplify FrameworkのUIコンポーネントですが、今回はUIのカスタマイズを試してみました。
色を変えてみる
テーマのカスタマイズについては以下のヘルプに記載がありますので、早速試してみます。
rootのcssに適用が良いとのことなので、下記のとおりsrc/styles.scssへ追記してみます。
:root {
--amplify-primary-color: #fc7963;
--amplify-primary-tint: #ff7359;
--amplify-primary-shade: #e0573e;
}
元のオレンジの色合いから変わってますね。
ちなみに、変更前はこちらです。
コンポーネントの文字列を日本語に変えてみる
コンポーネントのヘルプを見ると、コンポーネントの文字列はI18n.get(Translations.SIGN_IN_HEADER_TEXT)など、I18nを利用しているようです。
下記のドキュメントに記載の通り、Amplifyのライブラリでこれを利用すれば言語切り替えが出来そうですね。
ディクショナリの元になるものを探したところ、以下が参考になりそうでした。Angular側も探しましたがそれらしきものは見当たらず、React側のコンポーネントのソースになります。
要は以下の日本語版があれば良さそうですね。
export const dict = {
de: {
'Sign In': 'Anmelden',
'Sign Up': 'Registrieren',
'Sign Out': 'Abmelden',
'Sign in to your account': 'Melden Sie sich mit Ihrem Account an',
'Username': 'Benutzername',
'Password': 'Passwort',
'Enter your username': 'Geben Sie Ihren Benutzernamen ein',
'Enter your password': 'Geben Sie Ihr Passwort ein',
'No account? ': 'Kein Account? ',
'Forget your password? ': 'Passwort vergessen? ',
'Reset password': 'Passwort zurücksetzen',
'User does not exist': 'Dieser Benutzer existiert nicht',
'User already exists': 'Dieser Benutzer existiert bereits',
'Incorrect username or password': 'Falscher Benutzername oder falsches Passwort',
'Invalid password format': 'Ungültiges Passwort-Format',
'Create account': 'Hier registrieren',
'Forgot Password': 'Passwort vergessen',
'Change Password': 'Passwort ändern',
'New Password': 'Neues Passwort',
'Email': 'Email',
'Phone Number': 'Telefonnummer',
'Confirm a Code': 'Code bestätigen',
'Confirm Sign In': 'Anmeldung bestätigen',
'Confirm Sign Up': 'Registrierung bestätigen',
'Back to Sign In': 'Zurück zur Anmeldung',
'Send Code': 'Code senden',
'Confirm': 'Bestätigen',
'Resend Code': 'Code erneut senden',
'Submit': 'Abschicken',
'Skip': 'Überspringen',
'Verify': 'Verifizieren',
'Verify Contact': 'Kontakt verifizieren',
'Code': 'Code',
'Confirmation Code': 'Bestätigungs-Code',
'Lost your code? ': 'Code verloren? ',
'Account recovery requires verified contact information': 'Zurücksetzen des Account benötigt einen verifizierten Account',
'Invalid phone number format': `Ungültiges Telefonummern-Format. Benutze eine Nummer im Format: +12345678900`,
'Create Account': 'Account erstellen',
'Have an account? ': 'Schon registriert? ',
'Sign in': 'Anmelden',
'Create a new account': 'Erstelle einen neuen Account',
'Reset your password': 'Zurücksetzen des Passworts',
'An account with the given email already exists.': 'Ein Account mit dieser Email existiert bereits.',
'Username cannot be empty': 'Benutzername darf nicht leer sein',
'Password attempts exceeded': 'Die maximale Anzahl der fehlerhaften Anmeldeversuche wurde erreicht',
},
};
以下を参考にjsファイル化してディクショナリとして読み込ませます。（一部、キー値を修正しています）
$ mkdir -p src/assets/i18n/amplify $ touch src/assets/i18n/amplify/vocabularies.js
export const vocabularies = {
ja: {
'Sign In': 'サインイン',
'Sign Up': 'サインアップ',
'Sign Out': 'サインアウト',
'Sign in to your account': 'アカウントにサインイン',
'Username *': 'ユーザー名 *',
'Password *': 'パスワード *',
'Enter your username': 'ユーザー名を入力',
'Enter your password': 'パスワードを入力',
'No account?': 'アカウントが未登録ですか？',
'Forgot your password?': 'パスワードをお忘れですか？',
'Reset password': 'パスワードをリセット',
'User does not exist': 'ユーザーが存在しません',
'User already exists': 'ユーザーは既に存在します',
'Incorrect username or password.': 'ユーザー名またはパスワードが違います',
'Invalid password format': 'パスワードのフォーマットが不正です',
'Create account': 'アカウントを作成',
'Forgot Password': 'パスワードを忘れた',
'Change Password': 'パスワードを変更',
'New Password': '新しいパスワード',
'Email': 'Email',
'Phone Number': '電話番号',
'Confirm a Code': 'コードを確認',
'Confirm Sign In': 'サインインを確認',
'Confirm Sign up': 'サインアップを確認',
'Back to Sign In': 'サインインに戻る',
'Send Code': 'コードを送信',
'Confirm': '確認',
'Resend Code': 'コードを再送',
'Submit': '送信',
'Skip': 'スキップ',
'Verify': '検証',
'Verify Contact': '連絡先を検証',
'Code': 'Code',
'Confirmation Code': '確認コード',
'Lost your code?': 'コードがありませんか？',
'Account recovery requires verified contact information': 'Account recovery requires verified contact information',
'Invalid phone number format': '不正な電話番号フォーマットです。 電話番号は次のフォーマットで入力してください: +12345678900',
'Create Account': 'アカウントを作成',
'Have an account?': 'アカウントをお持ちですか？',
'Sign in': 'サインイン',
'Create a new account': '新しいアカウントを作成',
'Reset your password': 'パスワードをリセット',
'An account with the given email already exists.': 'そのメールアドレスは既に存在します',
'Username cannot be empty': 'ユーザー名は必須です',
'Password attempts exceeded': 'パスワード試行回数が超過しました',
},
};
呼び出し方としては app.module.ts で、以下のように対応すれば良さそうです。
import { I18n } from 'aws-amplify';
import { vocabularies } from '../assets/i18n/amplify/vocabularies';
I18n.putVocabularies(vocabularies);
I18n.setLanguage('ja');
これで起動してみると、こんな感じに日本語化されました！ 日本語化したことで、少しレイアウトが崩れているので、このあたりは要調整ですね。
別の画面に移ると、一部英語が残ってしまっているようです。おそらくキーとの紐づけが出来ていないので、これは地道にキーを探して日本語化していこうと思います。
まとめ
以上、新しくなったAmplify FrameworkのUIコンポーネントのカスタマイズを試してみました。
どなたかのお役に立てば幸いです。それでは！
